<template>
  <div>
    <Video ref="videoPlayer" :src="src" :controls="controls" @play="onPlay" @pause="onPause" @ended="onEnded"
      :height="height" :width="width" :second="second" :autoplay="autoplay" :loop="loop" :muted="autoplay || muted"
      :preload="preload"></Video>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, watch, defineProps } from 'vue';

const videoPlayer = ref(null);
const isPlaying = ref(false);


interface Props {
  src: string // 视频文件地址，支持网络地址 https 和相对地址
  poster?: string // 视频封面地址，支持网络地址 https 和相对地址
  second?: number // 在未设置封面时，自动截取视频第 second 秒对应帧作为视频封面
  width?: number | string// 视频播放器宽度，单位px
  height?: number // 视频播放器高度，单位px
  autoplay?: boolean // 视频就绪后是否马上播放，优先级高于preload
  controls?: boolean // 是否向用户显示控件，比如进度条，全屏等
  loop?: boolean // 视频播放完成后，是否循环播放
  muted?: boolean // 是否静音
  preload?: 'auto' | 'metadata' | 'none' // 是否在页面加载后载入视频，如果设置了autoplay属性，则preload将被忽略
  showPlay?: boolean // 播放暂停时是否显示播放器中间的暂停图标
  fit?: 'none' | 'fill' | 'contain' | 'cover' // video的poster默认图片和视频内容缩放规则
}

const props = withDefaults(defineProps<Props>(), {
  src: '',
  poster: '',
  second: 0.5,
  height: 200,
  width: '100%',
  autoplay: false,
  controls: true,
  loop: false,
  muted: false,
  preload: 'metadata',
  showPlay: true,
  fit: 'contain'
})

const playOrPause = () => {
  if (videoPlayer.value.paused) {
    videoPlayer.value.play();
  } else {
    videoPlayer.value.pause();
  }
};

const onPlay = () => {
  isPlaying.value = true;
};

const onPause = () => {
  isPlaying.value = false;
};

const onEnded = () => {
  console.log('Video ended');
};

const backStart = () => {
  videoPlayer.value.currentTime = 0
  videoPlayer.value.pause()

}

onMounted(() => {
  // 当组件挂载完成后，可以在这里进行其他的初始化操作
});

defineExpose({
  backStart,
});
</script>